<template>
  <div style="background:#eff3f6;font-size: 16px;font-family:'微软雅黑,Verdana,Helvetica,Arial';color: rgb(66, 66, 66);">
    <div class="jlayoutRight">
    <img :src="imageSrc">
    </div>
    <div class="head1 jlayoutCenter">{{getLanguage('title.expenseReimburseProcess')}}</div>
    <bpm-c-form>
    <bpm-c-block :ptitle="titles[0]"
                 :preadonly="readonlys[0]"
                 :pinputtype="inputTypes[0]"
                 :pcontent="vList[0]"/>
    <bpm-c-block :ptitle="titles[1]"
                 :preadonly="readonlys[1]"
                 :pinputtype="inputTypes[1]"
                 :pcontent="vList[1]"/>
    </bpm-c-form>
    <bpm-c-form>
    <bpm-c-block :ptitle="titles[2]"
                 :preadonly="readonlys[2]"
                 :pinputtype="inputTypes[2]"
                 :pcontent="vList[2]"/>
    <bpm-c-block :ptitle="titles[3]"
                 :preadonly="readonlys[3]"
                 :pinputtype="inputTypes[3]"
                 :pcontent="vList[3]"/>
    </bpm-c-form>
    <bpm-c-form>
    <bpm-c-block :ptitle="titles[4]"
                 :preadonly="readonlys[4]"
                 :pinputtype="inputTypes[4]"
                 :pcontent="vList[4]"/>
    <bpm-c-block :ptitle="titles[5]"
                 :preadonly="readonlys[5]"
                 :pinputtype="inputTypes[5]"
                 :pcontent="vList[5]"/>
    </bpm-c-form>
    <bpm-c-form>
    <bpm-c-block :ptitle="titles[6]"
                 :preadonly="readonlys[6]"
                 :pinputtype="inputTypes[6]"
                 :pcontent="vList[6]"/>
    <bpm-c-block :ptitle="titles[7]"
                 :preadonly="readonlys[7]"
                 :pinputtype="inputTypes[7]"
                 :pcontent="vList[7]"/>
    </bpm-c-form>
    <bpm-c-form>
    <bpm-c-block :ptitle="titles[8]"
                 :pline="1"
                 :preadonly="readonlys[8]"
                 :pinputtype="inputTypes[8]"
                 :pcontent="vList[8]"/>
    </bpm-c-form>
    <bpm-c-toptitle fontSize="16px" :title="topTitle"
                    :isCollapse="false">
      <table class="tableClass">
        <tr style="font-weight: bolder">
          <th>{{otherI18n.aprName}}</th>
          <th>{{otherI18n.aprRound}}</th>
          <th>{{otherI18n.aprTime}}</th>
          <th>{{otherI18n.aprOpinion}}</th>
        </tr>
        <tr v-for="(item, i) in printList"
            :key="i">
          <td>{{item.userName}}</td>
          <td>{{item.activityName}}</td>
          <td>{{toLocalDatePrint(item.completeTime)}}</td>
          <td>{{item.comments}}</td>
        </tr>
        <tr>
          <td colspan="2" style="border:none"><el-button @click="printPdf">{{bpmcoreI18n.print}}</el-button></td>
          <td colspan="2" style="border:none"><el-button @click="$router.back()">{{otherI18n.back}}</el-button></td>
        </tr>
      </table>
    </bpm-c-toptitle>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'printView',
  data () {
    return {
      baseTitle: this.getLanguage('title.expenseReimburseProcess'),
      topTitle: this.getLanguage('label.reimburse.print.expenseReimburse'),
      imageSrc: '',
      titles: [
        this.getLanguage('label.applyDate'),
        this.getLanguage('label.whBtReimburse.btNo'),
        this.getLanguage('label.userId'),
        this.getLanguage('label.phone'),
        this.getLanguage('label.companyName'),
        this.getLanguage('label.costShareCostCenter'),
        this.getLanguage('label.whBtReimburse.reimbStandardMoney'),
        this.getLanguage('label.whBtReimburse.totalsum'),
        this.getLanguage('label.whBtReimburse.folio')
      ],
      readonlys: [true, true, true, true, true, true, true, true, true],
      inputTypes: ['text', 'text', 'text', 'text', 'text', 'text', 'text', 'text'],
      printList: []
    }
  },
  computed: {
    ...mapState(['inst', 'ssc', 'lang', 'otherI18n', 'bpmcoreI18n', 'pageType', 'pageTypeEnum']),
    vList: function () {
      return [
        this.toLocaleDate(this.inst.createTime),
        this.inst.btNo,
        this.inst.userName,
        this.inst.userInfo.mobile,
        this.ssc.reimburse.whBtReimburse.reimbursecompanyname,
        this.ssc.reimburse.whBtReimburse.reimbursecompanycostcenter,
        this.ssc.reimburse.whBtReimburse.reimbStandardMoney,
        this.ssc.reimburse.whBtReimburse.totalsum,
        this.ssc.reimburse.whBtReimburse.folio]
    }
  },
  created () {
    // this.pdfPrint({me: this, async: true})
  },
  mounted () {
    console.log('whole print view mounted........')
    this.$nextTick(function () {
      // TODO all ajax runed when rendered complete.
      console.log('all needed ajax asked here for print………………………………………………')
      this.pdfPrint({me: this, async: true})
      console.log('all needed ajax asked here^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^')
    })
  },
  methods: {
    ...mapActions(['pdfPrint']),
    printPdf () {
      window.print()
    },
    toLocalDatePrint (v) {
      return this.toLocaleDate(v)
    },
    valueChanged (v, i) {
    }
  }
}
</script>

<style scoped>
  .head1 {
    background: url(/static/images/contentBg.png) repeat-x 0 -337px;
    color: #475d68;
    font-size: 16px;
    font-weight: bold;
    width: 980px;
    height: 26px;
    line-height: 26px;
  }
  .tableClass{
    border-collapse:collapse;
    width: 100%
  }
  .tableClass th{
    border:1px #dbdbdb solid;
  }
  .tableClass td{
    border:1px #dbdbdb solid;
  }
</style>
